<template>
  <div>
    <div class="node" v-has="{action: 'user:sms:list', effect: 'move'}">
    <div :class="[$style.search_box, $style.topSelect]">
      <SearchInput
        placeholder="手机号"
        label="手机号"
        style="margin-right:20px"
        :value="phone"
        :onChange="(val) => changeSearch('phone',val)"
       
      />
      <div :class="$style.selectBox">
        <label>状态：</label>
        <el-select
          style="width:120px"
          v-model="state"
          :clearable="true"
          placeholder="状态"
        >
          <el-option label="等待处理" :value="0" ></el-option>
          <el-option label="发送成功" :value="1"></el-option>
          <el-option label="发送失败" :value="2"></el-option>
        </el-select>
      </div>
      <div :class="$style.selectBox" style="margin-right:20px;display: flex;align-items: center;">
        <label>操作时间：</label>
        <el-date-picker
          v-model="appointmentTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
      </div>
       <div :class="$style.searchBox1" style="margin-left: 20px">
        <el-button type="primary"  @click="reSearch()">查询</el-button>        
      </div>
    </div>
    <Panel title="用户短信日志">
      <div slot='ext' :class="$style.examine">
        <el-button type="danger" icon="el-icon-delete" @click="()=>delAll()">批量删除</el-button>
    </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
      @getCheckId="getCheckId"
    >
    <template slot="operation" slot-scope="operation">
          <el-button
            type="text"
            @click="()=>del(operation.row.id)"
          >删除</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'user:sms:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from '@/tools/array'
import { dateFormat } from "@/tools/time";
export default {
  name: "userSms",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput
  },
  data() {
    return {
      tableData: [],
      multiId: [],
      query: {
        page: 1,
        type: 2
      },
       pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      state: '',
      operation: true,
      phone: '',
      appointmentTime: null,
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  created() {
    let now = new Date().getTime() + 3600 * 1000 * 24
    let year = new Date(now).getFullYear()
    let month = new Date(now).getMonth() 
    let day = new Date(now).getDate()
    let last = new Date().getTime() - 3600 * 1000 * 24 * 7
    let lastYear =  new Date(last).getFullYear() 
    let LastMonth = new Date(last).getMonth() 
    let lastDay = new Date(last).getDate()
    this.appointmentTime = [ new Date(lastYear, LastMonth, lastDay, 0, 0,0), new Date(year, month, day, 0, 0,0)]
    this.getQueryData();
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "手机号",
            type: "text",
            prop: "phone",
            align: "center"
          },
          {
            label: "短信内容",
            type: "text",
            prop: "sms",
            align: "center"
          },
          // {
          //   label: "发送用户",
          //   type: "text",
          //   prop: "uname",
          //   align: "center"
          // },
          // {
          //   label: "验证码",
          //   type: "text",
          //   prop: "yzm",
          //   align: "center"
          // },
          {
            label: "发送时间",
            type: "time",
            prop: "createTime",
            align: "center"
          },
          {
            label: "状态",
            type: "other",
            prop: "state",
            align: "center",
            fnc: val => val == 0 ? "等待发送" : val == 1 ? "发送成功" : "发送失败",
            class:  val => val == 0 ? "time-out" : val == 1 ? "agree" : "cancel",
          },
          {
            label: "外部短信编号",
            type: "text",
            prop: "outSn",
            align: "center"
          },
         
          //  {
          //   label: "超时时间",
          //   type: "time",
          //   prop: "expireTime",
          //   align: "center"
          // },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async getQueryData() {
      let endTime = this.appointmentTime ? (dateFormat(this.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : undefined
      let startTime  = this.appointmentTime ? (dateFormat(this.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      let page = this.pager.current
      let state = this.state
      let phone = this.phone
      let search = objectFilter({startTime, endTime, page, state, phone})
      const res = await request({
        url: "/sms/log/list",
        method: "POST",
         data: search
      });
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
      // console.log("数据----", res);
    },
    pageChange(val) {
      this.pager.current = val;
      this.getQueryData();
    },
    changeSearch(key, val) {
      this[key] = val;
    },
    reSearch(){
      this.pager.current = 1
      this.getQueryData()
    },
    getCheckId(data){
      this.multiId = data
    },
    delAll(){
      if(this.multiId.length<1){
        this.$message.error('请选择数据')
        return
      }
      this.remove(this.multiId)
    },
    del(id){
      this.remove([id])
    },
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let del = await request({
        url: "/sms/log/delete",
        method: "POST",
        dataType: 'json',
        data:  id
      });
      if (del.code !==0) return
        this.$message.success('删除成功')
        this.multiId = []
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.getQueryData()
      })
    },
  }
}
</script>
<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>